<template>
  <!-- 再次下发 -->
  <div class="task-again">
    <div class="task-again-con">
      <div class="fromed task-inf">
        <el-form ref="elForm3" :model="formData3" :rules="rules3" size="medium" label-width="120px">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="执行方式：" prop="zxfs">
                <el-radio-group v-model="formData3.zxfs">
                  <el-radio label="1" name="1" v-if="xjlxname!='例行巡检'">立即执行</el-radio>
                  <el-radio label="2" name="2" v-if="xjlxname!='例行巡检'">定期执行</el-radio>
                  <el-radio label="3" name="3" v-if="xjlxname=='例行巡检' || xjlxname=='自定义巡检'">周期执行</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 例行巡检和自定义巡检下，显示执行模式 -->
          <!-- <el-row :gutter="15" v-if="xjlxname=='例行巡检' || xjlxname=='自定义巡检'">
            <el-col :span="24">
              <el-form-item label="执行模式：" prop="zxms">
                <el-radio-group v-model="formData3.zxms">
                  <el-radio label="1" name="1">间隔模式</el-radio>
                  <el-radio label="2" name="2">周模式</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>-->
          <!-- 定期执行，显示 -->
          <el-row :gutter="15" v-if="formData3.zxfs==2">
            <el-col :span="24">
              <div class="crontabdom-item" v-for="(item, index) in formData3.zxrqlist" :key="index">
                <div>执行日期：</div>
                <div>
                  <el-date-picker
                    v-model="formData3.zxrqlist[index]"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
                <div>
                  <span @click="add(index)" class="iconfont iconxinzeng"></span>
                  <span @click="dele(index)" class="iconfont iconshanchu"></span>
                </div>
              </div>
            </el-col>
          </el-row>
          <!-- 周期执行显示 -->
          <el-row :gutter="15" v-if="formData3.zxfs==3">
            <el-col :span="24">
              <el-form-item label="执行日期：" prop="zxrq">
                <el-date-picker
                  v-model="formData3.zxrq"
                  :style="{width: '100%'}"
                  type="datetime"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 周期执行显示 -->
          <el-row :gutter="15" v-if="formData3.zxfs==3">
            <el-col :span="24">
              <el-form-item label="执行周期：" prop="zxzq">
                <el-input-number
                  v-model="formData3.zxzq"
                  controls-position="right"
                  :min="0"
                  :max="100"
                ></el-input-number>天
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 只有周期执行-周模式，才显示 -->
          <!-- <el-row :gutter="15" v-if="(formData3.zxfs==3) && (formData3.zxms==2)">
            <el-col :span="24">
              <el-form-item label="星期选择：" prop="zqweek">
                <el-checkbox-group v-model="formData3.zqweek">
                  <el-checkbox label="2">周一</el-checkbox>
                  <el-checkbox label="3">周二</el-checkbox>
                  <el-checkbox label="4">周三</el-checkbox>
                  <el-checkbox label="5">周四</el-checkbox>
                  <el-checkbox label="6">周五</el-checkbox>
                  <el-checkbox label="7">周六</el-checkbox>
                  <el-checkbox label="1">周日</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>-->
        </el-form>
      </div>
    </div>
    <div class="task-again-btn">
      <el-button type="primary" @click="save" class="centerbox">保存</el-button>
      <el-button type="primary" @click="issued" class="centerbox">任务下发</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
import { rtvideo } from "@/views/AuxiliaryMonitor/components/map";
import { Tree } from "element-ui";
import { log } from "three";
import date from "@/utils/date";
import time from "@/utils/time";
@Component
export default class taskAgain extends Vue {
  @Prop() datas!: any[];
  public formData3 = {
    zxfs: 0,
    zxrq: "",
    zxrqlist: [],
    zxzq: "",
    zxms: 0,
    zqweek: [], //传参的时候用-拼接
  };
  public rules3 = {
    zxfs: [],
    zxrq: [],
    zxzq: [],
    zxms: [],
    zqweek: [],
  };

  get xjlxname() {
    let xjlxname = this.datas[0].XJLXMC || "";
    return xjlxname;
  }

  add() {
    this.formData3.zxrqlist.push("");
  }
  dele(index: number) {
    if (this.formData3.zxrqlist.length == 1) {
      this.$message({
        type: "warning",
        message: "已经是最后一项了",
      });
    } else {
      this.formData3.zxrqlist.splice(index, 1);
    }
  }

  //保存
  savedata: any = {}; //保存返回的id、rwid在里头
  public saveStatus = false; //任务下发
  public save() {
    let xjlx = this.datas[0].XJLX;
    let bdzid = this.datas[0].BDZID;
    let rwid = this.datas[0].ID;
    let rwmc = this.datas[0].RWMC;
    let zxqkid = this.datas[0].ZXQKID;
    let zxms = this.formData3.zxms;
    let zxfs = this.formData3.zxfs; //判断用，不作为参数传递
    let params: any = {};
    if (zxfs == 0) {
      this.$message({
        type: "warning",
        message: "请勾选执行方式",
      });
      return;
    }

    let zxrqlist = this.formData3.zxrqlist;
    zxrqlist.map((k) => {
      k = date(k);
      return k;
    });
    // 立即
    if (zxfs == 1) {
      params = {
        czzt: "zq",
        bdzid: bdzid,
        rwid: rwid,
        xjlx: xjlx,
        xszq: "",
        zxqkid: zxqkid,
        sendType: "lj",
        zq: [],
        dq: [],
        rwmc: rwmc,
      };
    } else if (zxfs == 2) {
      // 定期
      params = {
        czzt: "zq",
        bdzid: bdzid,
        rwid: rwid,
        xjlx: xjlx,
        xszq: "",
        zxqkid: zxqkid,
        sendType: "dq",
        zq: [],
        dq: zxrqlist,
        rwmc: rwmc,
      };
    } else if (zxfs == 3) {
      // 周期
      params = {
        czzt: "zq",
        bdzid: bdzid,
        rwid: rwid,
        xjlx: xjlx,
        xszq: date(this.formData3.zxrq) + "," + this.formData3.zxzq,
        zxqkid: zxqkid,
        sendType: "zq",
        zq: [date(this.formData3.zxrq), this.formData3.zxzq],
        dq: [],
        rwmc: rwmc,
      };
    }

    (this as any).$services
      .xzRwSave({
        data: { xzrwParam: params },
        method: "post",
        postparams: true,
      })
      .then((result: any) => {
        console.log(result);
        if (result.data) {
          this.savedata = result.data;
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.saveStatus = true;
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.$message({
          type: "warning",
          message: "保存失败",
        });
      });
  }
  // 下发相关
  public issued() {
    if (!this.saveStatus) {
      this.$message({
        type: "warning",
        message: "请先保存",
      });
    } else {
      let xjlx = this.datas[0].XJLX;
      let bdzid = this.datas[0].BDZID;
      let rwid = this.savedata.rwid;
      let rwmc = this.datas[0].RWMC;
      let zxqkid = this.datas[0].ZXQKID;
      let zxfs = this.formData3.zxfs;
      let savedata = this.savedata; //保存接口返回的数据
      let params: any = {};
      let zxrqlist = this.formData3.zxrqlist;
      let dqlist = [];
      zxrqlist.forEach((k, j) => {
        dqlist[j] = {
          id: savedata.zq,
          time: date(k),
        };
      });
      // 立即
      if (zxfs == 1) {
        params = {
          czzt: "xz",
          bdzid: bdzid,
          rwid: rwid,
          xjlx: xjlx,
          xszq: "",
          zxqkid: zxqkid,
          sendType: "lj",
          zq: [],
          dq: [],
          rwmc: rwmc,
        };

        // 定期
      } else if (zxfs == 2) {
        params = {
          czzt: "xz",
          bdzid: bdzid,
          rwid: rwid,
          xjlx: xjlx,
          xszq: "",
          zxqkid: zxqkid,
          sendType: "dq",
          zq: [],
          dq: dqlist,
          rwmc: rwmc,
        };
      } else if (zxfs == 3) {
        params = {
          czzt: "xz",
          bdzid: bdzid,
          rwid: rwid,
          xjlx: xjlx,
          xszq: date(this.formData3.zxrq) + "," + this.formData3.zxzq,
          zxqkid: zxqkid,
          sendType: "zq",
          zq: [date(this.formData3.zxrq), this.formData3.zxzq],
          dq: [],
          rwmc: rwmc,
        };
      }

      (this as any).$services
        .xzrwRwxfButton({
          data: { xzrwParam: params },
          method: "post",
          postparams: true,
        })
        .then((result: any) => {
          if (result.data) {
            // this.treedata = result.data;
            this.$message({
              type: "success",
              message: "下发成功",
            });
            this.$emit("close");
          }
        })
        .catch((err: object) => {
          console.log(err);
          this.$message({
            type: "warning",
            message: "下发失败",
          });
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.task-again {
  width: 100%;
  height: 500px;
  &-con {
    width: 100%;
    height: 400px;
    .fromed {
      width: 100%;
      height: 100%;
      padding: 0.25rem 0;
      .tree {
        height: 240px;
        overflow-y: auto;
      }
      &-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .tableed {
      width: 100%;
      height: 100%;
    }
    .task-inf {
      width: 50%;
      margin: auto;
    }
  }
  &-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

<style lang="scss">
.task-again {
  .el-step__head.is-success {
    color: #0c96fc;
    border-color: #05affd;
  }
  .el-step__title.is-success {
    color: #0c96fc;
  }
}
</style>

